<template>
  <div id="app">
    <div class="header">
      <h1>晓坤坤购书商城</h1>
      <div class="top-right-buttons">
        <el-button v-if="!isLoggedIn" @click="navigateTo('/login')"
          >登录</el-button
        >
        <!-- 仅在未登录时显示 -->
        <el-button v-if="isLoggedIn" @click="navigateTo('/profile')"
          >个人信息</el-button
        >
        <el-button v-if="isLoggedIn" @click="logout">退出登录</el-button>
        <!-- 添加退出登录按钮 -->
        <el-button v-if="!isLoggedIn" @click="navigateTo('/login2')"
          >商家管理</el-button
        >
        <!-- 仅在未登录时显示 -->
        <el-button v-if="!isLoggedIn" @click="showRegisterDialog"
          >注册</el-button
        >
        <!-- 添加注册按钮 -->
      </div>
    </div>
    <div class="content">
      <router-view v-if="!isLoginOrControlPage"></router-view>
      <div v-else class="overlay">
        <router-view></router-view>
      </div>
    </div>
    <div class="footer" v-if="!isLoginOrControlPage">
      <el-row type="flex" justify="space-around">
        <el-col>
          <el-button @click="navigateTo('/')">
            <i class="el-icon-s-home"></i> 首页
          </el-button>
        </el-col>
        <el-col>
          <el-button @click="navigateToOrLogin('/cart')">
            <i class="el-icon-s-goods"></i> 购物车
          </el-button>
        </el-col>
        <el-col>
          <el-button @click="navigateToOrLogin('/payments')">
            <i class="el-icon-s-check"></i> 订单
          </el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 注册弹窗 -->
    <el-dialog title="用户注册" :visible.sync="registerDialogVisible">
      <el-form :model="registerForm" ref="registerForm">
        <el-form-item
          label="用户名"
          prop="username"
          :rules="[
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ]"
        >
          <el-input v-model="registerForm.username"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
          :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
        >
          <el-input type="password" v-model="registerForm.password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="registerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="registerUser">确认注册</el-button>
        <!-- 确认注册按钮 -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { EventBus } from "./utils/eventBus"; // 导入事件总线
import axios from "axios"; // 导入axios用于HTTP请求

export default {
  data() {
    return {
      isLoggedIn: false, // 用于跟踪用户登录状态
      registerDialogVisible: false, // 控制注册弹窗的显示
      registerForm: {
        // 注册表单数据
        username: "",
        password: "",
      },
    };
  },
  computed: {
    isLoginOrControlPage() {
      return this.$route.path === "/login" || this.$route.path === "/control";
    },
  },
  methods: {
    navigateTo(path) {
      this.$router.push(path);
    },
    navigateToOrLogin(path) {
      if (this.isLoggedIn) {
        this.navigateTo(path);
      } else {
        this.navigateTo("/login"); // 未登录时跳转到登录页面
      }
    },
    checkLoginStatus() {
      this.isLoggedIn = !!localStorage.getItem("userId"); // 检查用户是否登录
    },
    logout() {
      localStorage.removeItem("userId"); // 清除用户 ID
      localStorage.removeItem("user"); // 清除用户信息
      this.isLoggedIn = false; // 更新登录状态
      EventBus.$emit("user-logged-out"); // 触发登出事件
    },
    showRegisterDialog() {
      this.registerDialogVisible = true; // 显示注册弹窗
    },
    registerUser() {
      // 调用注册接口
      axios
        .post("/User/Add", this.registerForm)
        .then((response) => {
          if (response.data.code === 200) {
            this.$message.success("注册成功！");
            this.registerDialogVisible = false; // 关闭注册弹窗
            this.registerForm.username = ""; // 清空表单
            this.registerForm.password = "";
          } else {
            this.$message.error("注册失败: " + response.data.msg);
          }
        })
        .catch((error) => {
          console.error("注册失败:", error);
          this.$message.error("注册失败，请重试。");
        });
    },
  },
  mounted() {
    this.checkLoginStatus(); // 组件挂载时检查登录状态
    EventBus.$on("user-logged-in", this.checkLoginStatus); // 监听登录事件
  },
  beforeDestroy() {
    EventBus.$off("user-logged-in", this.checkLoginStatus); // 清理事件监听
  },
};
</script>

<style>
.header {
  background-color: #409eff;
  /* Element UI primary color */
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 24px;
  position: relative;
  /* 使其成为定位上下文 */
}

.top-right-buttons {
  position: absolute;
  /* 绝对定位 */
  top: 20px;
  /* 距离顶部的距离 */
  right: 20px;
  /* 距离右侧的距离 */
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
  padding: 10px 0;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}

.content {
  min-height: calc(100vh - 100px);
  /* Adjust height to accommodate header and footer */
  padding: 30px;
}

.el-button {
  width: 60px;
  font-size: 11px;
  /* Set a fixed width for buttons */
  padding: 12px 0px;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  /* 半透明背景 */
  z-index: 999;
  /* 确保在最上层 */
}

.footer .el-button {
  margin-left: 70px;
}
</style>
